<template>
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <MetricCard
        title="本月入库总额"
        :value="stats.monthlyInboundAmount"
        suffix="¥"
        :icon="Money"
        color="#1890ff"
        :trend="stats.amountTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <MetricCard
        title="本月入库单数"
        :value="stats.monthlyInboundCount"
        :icon="Document"
        color="#52c41a"
        :trend="stats.countTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <MetricCard
        title="待开发票"
        :value="stats.pendingInvoiceCount"
        :icon="Warning"
        color="#fa8c16"
        :trend="stats.invoiceTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <MetricCard
        title="供应商数量"
        :value="stats.supplierCount"
        :icon="User"
        color="#722ed1"
        :trend="stats.supplierTrend"
        class="stat-card-hover"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import MetricCard from '@/views/dashboard/components/MetricCard.vue'
import { Document, Money, Warning, User } from '@element-plus/icons-vue'

interface Stats {
  monthlyInboundAmount: number
  monthlyInboundCount: number
  pendingInvoiceCount: number
  supplierCount: number
  amountTrend: number
  countTrend: number
  invoiceTrend: number
  supplierTrend: number
}

defineProps<{
  stats: Stats
}>()
</script>

<style scoped>
.stats-row {
  margin-bottom: 16px;
}

/* 统计卡片悬停效果 */
.stat-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.stat-card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.stat-card-hover:active {
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-row {
    margin-bottom: 12px;
  }
  
  .stat-card-hover {
    margin-bottom: 12px;
  }
}
</style>